<template>
	<view class="columnbox wdh-100 content">
		<!-- 	<view class="rowbox s-box">
			<picker @change="stationChange" mode="selector" :range="stationList" range-key="name">
				<view class="rowbox ">
					{{curstation.name}}
					<view style="margin-left: 20rpx;">
						<u-icon name="arrow-down" size="24rpx"></u-icon>
					</view>
				</view>
			</picker>
			<view>
				<u-tabs @click="statusChange" lineColor="#1E72CA" :list="statusList"></u-tabs>
			</view>
		</view> -->
		<view v-for="(item,index) in infolist" :key='index' class="columnbox gw-box">
			<view class="wdh-100 rowbox spb t-box">
				<view class="rowbox">
					<view class="doorName">{{item.doorName}}</view>
					<view class="zd" v-if="item.doorType==0">自动</view>
					<view class="zz" v-else-if="item.doorType==1">自助</view>
					<view class="rg" v-else-if="item.doorType==2">人工</view>
					<view class="doorName" v-if="item.verifyType==0" style="color: #BD3124;margin-left: 20rpx;">
						工位审核中
					</view>
				</view>
				<template v-if="item.verifyType==3">
					<view class="status" v-if="item.opesType==0">空闲</view>
					<view class="status" v-else-if="item.opesType==1">使用中</view>
					<view class="status" v-else-if="item.opesType==2">维修中</view>
				</template>
				<template v-else-if="item.verifyType==0">
					<view class="status" style="color: #BD3124;">不可用</view>
				</template>
			</view>
			<view class="info-list wdh-100" :class="{'nouse':item.opesType==2}">
				<view @click="item.opesType==2||item.verifyType==0?'':kaiMen(item)">开门</view>
				<view @click="item.opesType==2||item.verifyType==0?'':guanMen(item)">关门</view>
				<view @click="item.opesType==2||item.verifyType==0?'':tongDian(item)">通电</view>
				<view @click="item.opesType==2||item.verifyType==0?'':duanDian(item)">断电</view>
				<view @click="item.verifyType==0?'':kongXian(item)">工位空闲</view>
				<view @click="item.opesType==2||item.verifyType==0?'':weiXiu(item)">工位维修</view>
				<view @click="item.opesType==2||item.verifyType==0?'':dingDan(item)">结束订单</view>
				<view @click="deletGw(item)">删除工位</view>
				<view v-if="item.doorType==1" @click="item.opesType==2||item.verifyType==0?'':renGong(item)">转人工洗</view>
				<view v-if="item.doorType==2" @click="item.opesType==2||item.verifyType==0?'':ziZhu(item)">转自助洗</view>
			</view>
		</view>
		<view class="wdh-100" style="height: 200rpx;"></view>
		<view class="rowbox wdh-100 bottom-box">
			<view class="rowbox wdh-100 send-btn" @click="addGw">新增工位</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				infolist: [],
				total: 0,
				stationList: [],
				curstation: '',
				pageNum: 1,
				statusList: [{
						name: '运营中'
					},
					{
						name: '审核中'
					}
				],
				curstatus: 1
			};
		},
		onLoad(options) {

			if (options.id) {
				this.id = options.id
			}

		},
		onShow() {
			this.pageNum = 1
			this.infolist = []
			this.getStationList()
		},
		onPullDownRefresh() {
			this.pageNum = 1
			this.infolist = []
			this.getList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		methods: {
			deletGw(id) {
				console.log('===', id.doorName)
				uni.navigateTo({
					url: './delet?id=' + this.curstation.stationId +
						'&img=' + JSON.parse(this.curstation.listUrl)[0].url +
						'&name=' + this.curstation.name +
						'&address=' + this.curstation.address +
						'&doorInfo=' + JSON.stringify(id)
				})
			},
			statusChange(e) {
				switch (e.name) {
					case '运营中':
						this.curstatus = 1
						break;
					case '审核中':
						this.curstatus = 2
						break;
				}
				this.pageNum = 1
				this.infolist = []
				this.getList()
			},
			dingDan(v) {
				this.$req.put(`/xcx/manager/stationDoor/finish/${v.doorId}/`).then(res => {
					uni.showModal({
						title: res.data.msg
					})
				})
			},
			ziZhu(v) {
				this.$req.get(`/xcx/manager/stationDoor/doorType/${v.doorId}/1`).then(res => {
					uni.showModal({
						title: res.data.msg
					})
					this.pageNum = 1
					this.infolist = []
					this.getList()
				})
			},
			renGong(v) {
				this.$req.get(`/xcx/manager/stationDoor/doorType/${v.doorId}/2`).then(res => {
					uni.showModal({
						title: res.data.msg
					})
					this.pageNum = 1
					this.infolist = []
					this.getList()
				})
			},
			weiXiu(v) {
				this.$req.get(`/xcx/manager/stationDoor/opesType/${v.doorId}/2`).then(res => {
					uni.showModal({
						title: res.data.msg
					})
					this.pageNum = 1
					this.infolist = []
					this.getList()
				})
			},
			kongXian(v) {
				this.$req.get(`/xcx/manager/stationDoor/opesType/${v.doorId}/0`).then(res => {
					uni.showModal({
						title: res.data.msg
					})
					this.pageNum = 1
					this.infolist = []
					this.getList()
				})
			},
			duanDian(v) {
				this.$req.get(`/xcx/manager/stationDoor/energize/switch/${v.doorId}/1`).then(res => {
					uni.showModal({
						title: res.data.msg
					})
				})
			},
			tongDian(v) {
				this.$req.get(`/xcx/manager/stationDoor/energize/switch/${v.doorId}/0`).then(res => {
					uni.showModal({
						title: res.data.msg
					})
				})
			},
			guanMen(v) {
				this.$req.get(`/xcx/manager/stationDoor/switch/${v.doorId}/1`).then(res => {
					uni.showModal({
						title: res.data.msg
					})
				})
			},
			kaiMen(v) {
				this.$req.get(`/xcx/manager/stationDoor/switch/${v.doorId}/0`).then(res => {
					uni.showModal({
						title: res.data.msg
					})
				})
			},
			stationChange(e) {
				this.curstation = this.stationList[e.detail.value]
				this.pageNum = 1
				this.infolist = []
				this.getList()
			},
			getStationList() {
				this.$req.get('/xcx/manager/station/list', {
					pageSize: 50,
					pageNum: this.pageNum
				}).then(res => {
					this.stationList = res.data.rows
					if (this.id != '') {
						this.stationList.forEach(resp => {
							if (resp.stationId == this.id) {
								this.curstation = resp
							}
						})
					} else {
						this.curstation = this.stationList[0]
					}
					this.getList()
				})
			},
			getList() {
				this.$req.get('/xcx/manager/stationDoor/list', {
					pageSize: 20,
					pageNum: this.pageNum,
					stationId: this.curstation.stationId
				}).then(res => {
					if (res.data && res.data.rows.length > 0) {
						this.infolist = this.infolist.concat(res.data.rows)
					}
					this.total = res.total
				})
			},
			addGw() {
				if (this.stationList.length == 0) {
					uni.showModal({
						title: '请添加洗车站'
					})
				}
				uni.navigateTo({
					url: '/packageA/gongwei/add?id=' + this.curstation.stationId +
						'&img=' + JSON.parse(this.curstation.listUrl)[0].url +
						'&name=' + this.curstation.name +
						'&address=' + this.curstation.address
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #f7f8fa;
		min-height: 100vh;
		justify-content: flex-start;
		font-family: PingFang SC;
		width: 100%;
		overflow: hidden;
	}

	.s-box {
		width: 100vw;
		justify-content: flex-start;
		font-size: 28rpx;
		padding: 20rpx 20rpx;
		background: #fff;
	}

	.gw-box {
		width: 710rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding: 20rpx 20rpx;
		background: #fff;

		.t-box {
			padding-bottom: 20rpx;
			border-bottom: #f7f8fa solid 1px;

			.doorName {
				font-size: 28rpx;
				margin-right: 20rpx;
			}

			.status {
				font-size: 28rpx;
				color: #17698F;
			}

			.zd,
			.zz,
			.rg {
				font-size: 24rpx;
				color: #fff;
				padding: 4rpx 20rpx;
				line-height: 40rpx;
				background: #3847ff;
				border-radius: 10rpx;
			}

			.zz {
				background: #8d00f8;
			}

			.rg {
				background: #f39a2f;
			}
		}

		.info-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			margin-top: 20rpx;

			view {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				background: #e3f1fc;
				font-size: 28rpx;
				width: 150rpx;
				margin-top: 20rpx;
				height: 70rpx;
				border-radius: 10rpx;
				color: #000;
				margin-right: 20rpx;
			}
		}

		.info-list>view:nth-child(4n) {
			margin-right: 0;
		}

		.nouse {
			view {
				background: #bebebe;
			}
		}
	}
</style>